@import "../common/global";


//用于动画
.message-fade-enter-active, .message-fade-leave-active {
  transition: all .3s ease;
}
.message-fade-enter-from ,.message-fade-leave-to{
  transform: translateY(-20px);
  opacity: 0;
}

@mixin messageType($paramColor) {
  color: $paramColor;
  background-color: mix(#ffffff,$paramColor,90%);
  border: 1px solid mix(#ffffff,$paramColor,70%);;
}

.message{
  position: fixed;
  top: 15px;
  right: 36%;
  width: 22%;
  border-radius:4px;
  padding: 8px 12px;
  color: #616060;
  font-size: 14px;
  z-index: 500;
  transition: all .3s ease;

  // 动态创建时候拼接成的class
  &.message-success{
    @include messageType($successThemeColor);
  }
  &.message-info{
    @include messageType($normalThemeColor);
  }
  &.message-warning{
    @include messageType($warningThemeColor);
  }
  &.message-error{
    @include messageType($dangerThemeColor);
  }

}